/*
 * @Description: 鼠标拉动指令
 * @Autor: zhangzhanhua
 * @Date: 2021-01-28 10:35:49
 * @LastEditors: zhangzhanhua
 * @LastEditTime: 2021-01-30 12:26:58
 */
/**
 * 封装表格拖动指令
 */
export default {
    bind(el, bind) {
        let isDrag = false
        let scrollLeft = 0
        // 鼠标按下事件
        el.onmousedown = function (e) {
            // console.log(el.offsetWidth);
            if(e.button != 0 || e.path[3].tagName == 'THEAD') return //如果是按下鼠标右键或者是表头就不进行操作
            let tableScroll = el.childNodes[2]; //表格滚动条所在元素
            // let tableWidth =  Number(el.bodyWidth.split('p')[0]) //表格总宽度
            let curretnWidth = el.offsetWidth//当前表格可示宽度
            let disX = e.clientX - scrollLeft;
            isDrag = true;
            el.onmousemove = (oel) => {
                if (isDrag) {
                    //window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                    let moveX = oel.clientX - disX; //位移
                    if (moveX > 0) { //右侧到顶
                        moveX = 0;
                    }
                    // else if(curretnWidth - moveX >= tableWidth){ //左侧到顶
                    // 	moveX = curretnWidth - tableWidth 
                    // }
                    tableScroll ? tableScroll.scrollLeft = -moveX : ''
                }
            }
            //监听滚动条滚动
            el.childNodes[2].onscroll = (sel) => {
                scrollLeft = -el.childNodes[2].scrollLeft
                if(window.getSelection().toString()) {
					el.onmousemove = null;
				}
            }
        };

        // 鼠标抬起事件
        el.onmouseup = function () {
            // 开关关闭
            isDrag = false;
            el.onmousemove = null
            el.childNodes[2].onscroll = null
        };
        // 鼠标移动事件
        el.onmouseleave = function () {
            // 开关关闭
            isDrag = false;
            el.onmousemove = null
            el.childNodes[2].onscroll = null
        };
    }
};